<template>
  <div class="customModelTree">
    <div class="customModelTreeHeader">
      <i class="customModelTreeHeaderLine"></i>
      <span class="customModelTreeHeaderTxt">{{ collapseList[0].typeName }}</span>
    </div>
    <div class="customModelTreeContent">
      <a-tree
        :replaceFields="{title: 'typeName', key: 'id'}"
        :expandedKeys="expandedKeys"
        @expand="expandEvent"
        :selected-keys="collapseDataSelVal"
        :tree-data="collapseList[0].children"
        @select="selValChange"
      />
      <!-- <a-collapse accordion @change="collapseDataChange">
        <a-collapse-panel v-for="(item, index) in collapseList"
         :key="index + 1" :header="item.name">
          <template v-if="item.list.length">
            <div v-for="(itm) in item.list" :key="itm.id"
            @click="selValChange(index + 1, itm.id)"
             class="customModelTreeContentTxt"
             :class="{'customModelTreeContentSelTxt':(collapseDataSelVal==itm.id && modelType==itm.modelType)}">
              {{ itm.typeName }}
            </div>
          </template>
          <template v-else>
            <div>暂无模型</div>
          </template>
        </a-collapse-panel>
      </a-collapse> -->
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
export default {
  name: 'customModelTree',
  props: {
    modelType: {
      default: 1,
    },
    collapseDataSelVal: {
      default: []
    },
  },
  data() {
    return {
      collapseData: null,
      expandedKeys: [],
      collapseList: [
        {
          typeName: '',
          id: '1',
          children: [],
        },
        {
          typeName: '',
          id: '2',
          children: [],
        },
      ],
      url: {
        getModelTreeList: '/sjmx2/modelTemplateConfig/treeList',
      }
    }
  },
  mounted() {
    this.getModelTreeList();
  },
  methods: {
    expandEvent(e) {
      this.expandedKeys = e;
    },
    editTreeData(list, type) {
      for(let data of list) {
        let children = data.children;
        data.id = type + '-' + data.id;
        if(children && children.length) {
          // data.selectable = false;
          data.children = this.editTreeData(children, type);
        }else {
          // data.selectable = true;
        }
      }
      return list
    },
    getTreeFirstLeafData(list, expandTreeList=[]) {
      let data  = list.length ? list[0] : {};
      if(data.children && data.children.length) {
        expandTreeList.push(data.id);
        let childrenData = this.getTreeFirstLeafData(data.children, expandTreeList);
        if(childrenData) {
          return childrenData;
        }
      }else {
        expandTreeList.push(data.id);
        return {childrenData: data, expandTreeList};
      }
    },
    getModelTreeList() {
      getAction(this.url.getModelTreeList,{type:this.modelType}).then((res)=>{
        if(res.code == 200) {
          if(this.modelType == 1) {
            let template = this.editTreeData(res.result.template, 1);
            this.collapseList = [
              {
                typeName: `标准模型(${res.result.templateNum})`,
                id: 'model1',
                selectable: false,
                children: template,
              }
            ];

            if(template.length && !this.collapseDataSelVal.length) {
              let {childrenData, expandTreeList} = this.getTreeFirstLeafData(this.collapseList);
              this.expandedKeys = expandTreeList;
              console.log(childrenData);
              this.selValChange([childrenData.id]);
            }
          }else{
            let own = this.editTreeData(res.result.own, 2);
            this.collapseList = [
              {
                typeName: `我的模型(${res.result.ownNum})`,
                id: 'model2',
                selectable: false,
                children: own,
              },
            ];

            if(own.length && !this.collapseDataSelVal.length) {
              let {childrenData, expandTreeList} = this.getTreeFirstLeafData(this.collapseList);
              this.expandedKeys = expandTreeList;
              console.log(childrenData);
              this.selValChange([childrenData.id]);
            }
          }
        }
      })
    },
    selValChange(e) {
      this.$emit('change', e);
    }
  }
}
</script>

<style lang="less" scoped>
.customModelTree {
  background-color: #ffffff;
  border-radius: 25px;
}
.customModelTreeHeader {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 55px;
  padding: 15px 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #EAEAEA;
}
.customModelTreeHeaderLine {
  display: inline-block;
  width: 4px;
  height: 20px;
  margin-right: 8px;
  background-color: rgba(49, 84, 165, 1);
}
.customModelTreeHeaderTxt {
  font-size: 18px;
  color: #3154A5;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  line-height: normal;
}
.customModelTreeContent {
  height: calc(100% - 55px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 15px 20px;
}
.customModelTreeContentTxt {
  cursor: pointer;
  font-size: 14px;
  line-height: normal;
  letter-spacing: normal;
  color: #333333;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
  &:hover {
    color: #3154A5;
  }
}
.customModelTreeContentSelTxt {
  color: #3154A5;
}
</style>